<template>
  <view class="myEarnings">
    <z-paging ref="paging" style="background-color: #fff;" v-model="dataList" :auto="false" @query="queryList">
      <block slot="top">
        <view class="block">
          <view class="block-warp">
            <image class="imgBg" src="../../static/images/shouyiBg.png" mode=""></image>
            <view class="realBody">
              <view class="realBody-tp">
                <view class="realBody-tp-item">
                  <view class="value">{{userInfo.total_income}}</view>
                  <view class="label">累计收益</view>
                </view>
                <view class="realBody-tp-item">
                  <view class="value">{{userInfo.now_money}}</view>
                  <view class="label">当前余额</view>
                </view>
              </view>
              <view class="realBody-tb">
                <view class="realBody-tb-item" @click="tixian">
                  申请提现
                </view>
                <view class="realBody-tb-item" @click="toRecordPage">
                  提现记录
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="line">
          提现账户管理
        </view>
        <view class="account">
          <view class="account-item">
            <view class="account-item-fl">
              <image class="icon" src="../../static/images/weixin.png" mode=""></image>
              <view class="info">
                <view class="name">
                  微信账户
                </view>
                <view class="desc">
                  {{userInfo.weixin_info.wechat?userInfo.weixin_info.wechat:'暂未绑定'}}
                </view>
              </view>
            </view>
            <view class="account-item-fr">
              <text class="desc" v-if="userInfo.weixin_info" @click="toAddCountPage('weixin')">
                编辑
              </text>
              <text class="desc" v-else @click="toAddCountPage('weixin')">
                添加
              </text>

            </view>
          </view>
          <view class="account-item">
            <view class="account-item-fl">
              <image class="icon" src="../../static/images/zhifubao.png" mode=""></image>
              <view class="info">
                <view class="name">
                  支付宝账户
                </view>
                <view class="desc">
                  {{userInfo.alipay_info.alipay_code?userInfo.alipay_info.alipay_code:'暂未绑定'}}
                </view>
              </view>
            </view>
            <view class="account-item-fr">
              <text class="desc" v-if="userInfo.alipay_info" @click="toAddCountPage('alipay')">
                编辑
              </text>
              <text class="desc" v-else @click="toAddCountPage('alipay')">
                添加
              </text>
            </view>
          </view>
          <view class="account-item">
            <view class="account-item-fl">
              <image class="icon" src="../../static/images/bankcard.png" mode=""></image>
              <view class="info">
                <view class="name">
                  银行卡
                </view>

                <view class="desc">
                  {{userInfo.bank_info.bank_name?userInfo.bank_info.bank_name+" "+userInfo.bank_info.bank_code:'暂未绑定'}}
                </view>
              </view>
            </view>
            <view class="account-item-fr">
              <text class="desc" v-if="userInfo.bank_info" @click="toAddCountPage('bank')">
                编辑
              </text>
              <text class="desc" v-else @click="toAddCountPage('bank')">
                添加
              </text>
            </view>
          </view>
        </view>
        <view class="line">
          历史明细
        </view>
        <view class="detail">
          <view class="tabs">
            <view class="tabs-item" v-for="(item, index) in tabsList" @click="setIndex(index)" :key="index"
              :class="params.type == index?'active':''">
              {{item.name}}
            </view>
          </view>
         </view> 
        </block>
      <view class="tabs-menu">
        <view class="tabs-menu-list" v-for="(item, index) in dataList" :key="index">
          <view class="row1">
            <view class="row1-label text-ellipsis">{{item.mark}}</view>
            <view class="row1-value">{{params.type == 0?'-':'+'}}{{item.number}}</view>
          </view>
          <view class="row2">
            <view class="row2-label">{{item.create_time}}</view>
            <view class="row2-value">余额</view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        userInfo: {
          weixin_info: {
            wechat: ""
          },
          alipay_info: {
            alipay_code: ""
          },
          bank_info: {
            bank_code: "",
            bank_name: ""
          }
        },
        tabsList: [{
            name: "支出"
          },
          {
            name: "收入"
          }
        ],
        params: {
          type: 0,
          page: 1,
          limit: 10
        },
        dataList: []
      }
    },
    onShow() {
      this.getUserInfo();
      this.$nextTick(() => {
        this.$refs.paging.reload();
      })
    },
    methods: {
      toRecordPage() {
        uni.navigateTo({
          url: "/pages/mine/withdrawalRecord"
        })
      },
      queryList(pageNo, pageSize) {
        let temp = {
          page: pageNo,
          limit: pageSize,
          type: this.params.type
        }
        // 此处请求仅为演示，请替换为自己项目中的请求
        reqApi.billList(temp).then(res => {
          console.log("返回的结果", res);
          // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
          this.$refs.paging.complete(res.data.list);
        })
      },
      setIndex(index) {
        this.params.type = index;
        this.$refs.paging.reload();
      },
      tixian() {
        uni.navigateTo({
          url: "/pages/mine/withDraw"
        })
      },
      getUserInfo() {
        reqApi.getUserInfo({}).then(res => {
          console.log("获取用户信息", res);
          uni.setStorageSync("userInfo", res.data);
          this.userInfo = res.data;
        })
      },
      toAddCountPage(type) {
        uni.navigateTo({
          url: `/pages/mine/addBank?type=${type}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tabs-menu {
    padding: 0 30rpx;
    box-sizing: border-box;
  
    .tabs-menu-list {
      padding: 30rpx 0;
      box-sizing: border-box;
      border-bottom: 2rpx solid #eee;
  
      .row1 {
        display: flex;
        justify-content: space-between;
  
        .row1-label {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #222222;
        }
  
        .row1-value {
          font-family: DIN, DIN;
          font-weight: 500;
          font-size: 40rpx;
          color: #EEA800;
        }
      }
  
      .row2 {
        display: flex;
        justify-content: space-between;
        margin-top: 8rpx;
  
        .row2-label {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #BBBBBB;
        }
  
        .row2-value {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #999999;
        }
      }
    }
  }
  .active {
    font-weight: bold !important;
    color: #EEA800 !important;
    border-bottom: 2rpx solid #EEA800;
  }

  .detail {
    background: #fff;

    .tabs {
      display: flex;

      .tabs-item {
        height: 104rpx;
        flex: 1;
        text-align: center;
        line-height: 104rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #999999;
      }
    }


  }

  .myEarnings {
    .account {
      padding: 30rpx;
      box-sizing: border-box;
      background: #fff;

      .account-item:last-child {
        margin-bottom: 0;
      }

      .account-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 38rpx;

        .account-item-fl {
          flex: 1;
          display: flex;

          .icon {
            width: 80rpx;
            height: 80rpx;
            margin-right: 12rpx;
          }

          .info {
            display: flex;
            flex-direction: column;

            .name {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 32rpx;
              color: #222222;
            }

            .desc {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #999999;
            }
          }
        }

        .account-item-fr {
          .desc {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #EEA800;
          }
        }
      }
    }

    .block {
      padding: 20rpx 30rpx;
      background: #fff;

      .block-warp {
        width: 100%;
        height: 286rpx;
        position: relative;

        .imgBg {
          width: 100%;
          height: 286rpx;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 10;
        }

        .realBody {
          width: 100%;
          height: 286rpx;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 20;
          padding: 0 30rpx;
          box-sizing: border-box;

          .realBody-tp {
            display: flex;
            justify-content: space-between;

            .realBody-tp-item {
              flex: 1;
              padding: 40rpx 0;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              align-items: center;

              .value {
                font-family: DIN, DIN;
                font-weight: bold;
                font-size: 48rpx;
                color: #FFFFFF;
              }

              .label {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #FFFFFF;
              }
            }
          }

          .realBody-tb {
            padding: 30rpx 60rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;

            .realBody-tb-item {
              width: 208rpx;
              height: 60rpx;
              background: rgba(255, 255, 255, 0.2);
              border-radius: 8rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 32rpx;
              color: #FFFFFF;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }

    .line {
      height: 80rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #999999;
      line-height: 33rpx;
      background: #f6f6f6;
      display: flex;
      align-items: center;
    }
  }
</style>